<template>
	<!-- 商品管理 -->
	<view class="shopmanagement_wp">
		<view class="cate">
			<text>展示商品前，请先设置商品分类</text>
			<button type="mini" @click="$navTo('/pages/business/shopclass?uid='+uid)">去设置</button>
		</view>
		<view class="s_nav">
			<view class="s_nav_item" :class="{'s_nav_active':active===1}" @click="navTap(1)">上架中</view>
			<view class="s_nav_item" :class="{'s_nav_active':active===0}" @click="navTap(0)">已下架</view>
		</view>

		<view class="s_list">
			<view class="s_item" v-for="(item,index) in list" :key="item.id">
				<view class="s_i_head">
					<image :src="item.img" mode=""></image>
					<view class="s_i_title">
						<view class="s_flex">
							<view class="s_i_name clamp">{{item.title}}</view>
							<view class="s_cate">{{item.cate}}</view>
						</view>
						<view class="s_i_money"><text>{{item.price}}</text><text>元</text>
						</view>
					</view>
				</view>
				<view class="s_i_buttons">
					<view class="s_edit" @click="$navTo('../business/shopset?id='+item.id+'&uid='+uid)">修改</view>
					<view class="s_xiajia" v-if="active===0" @click="goodsUp(item.id,index)">上架</view>
					<view class="s_xiajia" v-else-if="active===1" @click="down(item.id,index)">下架</view>
					<view class="s_sell" v-if="item.istop==0&&active==1" @click="sellGoods(item.id,1)">首页推荐</view>
					<view class="s_sell" v-if="item.istop==1&&active==1" @click="sellGoods(item.id,0)">取消推荐</view>
				</view>
			</view>
		</view>

		<view class="s_buttons" @click="$navTo('/pages/business/shopset?uid='+uid)">添加 商品</view>

		<view class="loading_empty">
			<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
			<text v-if="isempty">到底了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uid: '',
				active: 1,

				page: 0,
				list: [],


				isloading: false,
				isempty: false,
			}
		},
		onReachBottom() {
			this.getlist();
		},
		onLoad(options) {
			this.uid = options.uid;
		},
		onShow() {
			this.page = 0;
			this.list = [];
			this.getlist();
		},
		methods: {
			sellGoods(id,status){
				var that = this;
				that.$axios('supgoods/setTop', 'POST', 'supplier', {
					id,
					status,
					uid: that.uid
				}).then(res => {
					if (res.data.code == 200) {
						that.$api.msg("推荐成功!");
						that.page = 0;
						that.list = [];
						that.getlist();
					}
				})
			},
			goodsUp(id, i) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: '上架商品?',
					success(e) {
						if (e.confirm) {
							that.$axios('supgoods/goodsUp', 'POST', 'supplier', {
								id,
								uid: that.uid
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg("上架成功!");
									that.list.splice(i, 1);
								}
							})
						}
					}
				})
			},
			down(id, i) {
				var that = this;
				uni.showModal({
					title: "提示",
					content: '下架商品?',
					success(e) {
						if (e.confirm) {
							that.$axios('supgoods/goodsDown', 'POST', 'supplier', {
								id,
								uid: that.uid
							}).then(res => {
								if (res.data.code == 200) {
									that.$api.msg("下架成功");
									that.list.splice(i, 1);
								}
							})
						}
					}
				})
			},
			getlist() {
				this.page += 1;
				this.isloading = true;
				this.isempty = false;
				this.$axios('supgoods/goodsList', 'POST', 'supplier', {
					status: this.active,
					page: this.page,
					uid: this.uid
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = this.list.concat(res.data.data);
						this.isempty = res.data.data.length <= 0 ? true : false;
					}
				})
			},
			navTap(e) {
				if (e == this.active) return;
				this.active = e;
				this.page = 0;
				this.list = [];
				this.getlist();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		color: $font-color-dark;
		padding-bottom: 130upx;
	}
	.cate{
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		width: 100%;
		position: fixed;
		background: #f2f2f2;
		top: 0;
		button{
			background: $bg-color;
			color: #fff;
			margin: 0;
			font-size: 24rpx;
			&::after{
				border: none;			
			}
		}
	}
	.s_nav {
		position: fixed;
		background-color: #fff;
		display: flex;
		align-items: center;
		font-size: $font-base;
		width: 100%;
		z-index: 10;
		top: 80rpx;
	}

	.s_nav_item {
		flex: 1;
		line-height: 60upx;
		padding: 20upx 0;
		text-align: center;
		position: relative;
	}

	.s_nav_active:after {
		content: '';
		position: absolute;
		bottom: 20upx;
		left: 50%;
		transform: translateX(-50%);
		border-bottom: 3px $base-color solid;
		width: 40upx;
	}

	.s_list {
		overflow: hidden;
		padding-top: 180upx;
	}

	.s_item {
		background-color: #fff;
		border-radius: 10upx;
		margin: 20upx 20upx 0;
		padding: 20upx;
	}

	.s_i_head {
		display: flex;
	}

	.s_i_head image {
		border-radius: 10upx;
		height: 130upx;
		width: 130upx;
	}

	.s_i_title {
		padding-left: 20upx;
		line-height: 75upx;
		width: calc(100% - 135upx);
		.s_flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.s_cate{
				color: $bg-color;
				font-size: 26rpx;
			}
		}
		.s_i_name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 72%;
		}
		
		.s_i_money {
			color: $base-color;
		}
		
		.s_i_money text:nth-of-type(2) {
			font-size: 20upx;
			margin-right: 50upx;
		}
		
		.s_i_money text:nth-of-type(3) {
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.s_i_buttons {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20upx;
		letter-spacing: 2px;
		view {
			border: 1px hsl(0, 0%, 87%) solid;
			border-radius: 40upx;
			line-height: 60upx;
			text-align: center;
			width: 150upx;
		}
		.s_edit {
			margin-right: 30upx;
		}
		.s_sell{
			margin-left: 30rpx;
		}
		.s_xiajia {
			background: linear-gradient(to right, #ff7101, #f03201);
			color: #fff;
		}
	}
	.s_buttons {
		background-color: $base-color;
		border-radius: 20upx;
		color: #fff;
		line-height: 70upx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30upx;
		text-align: center;
		width: 94%;
		box-shadow: 4rpx 5rpx 17rpx 7rpx #ddd;
	}

	.loading_empty {
		color: #0062CC;
		text-align: center;
		padding: 20upx;
	}

	.loading_empty image {
		height: 60upx;
		width: 60upx;
	}
</style>